<template>
    <div class="content">
        <a-card class="card">
            <div class="avatar">
                <a-card title="Default size card" style="width: 100%">
                    <template #extra><a href="#" style="text-align: left">修改头像</a></template>
                    <div class="img">
                        <img src="@/assets/img/login/logo.png" alt="">
                    </div>
                </a-card>
            </div>
            <div class="info">
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane key="2" tab="账号信息">
                        <div class="list">
                            <div class="title">
                                账号名：
                            </div>
                            <div class="list_content">
                                zxy
                            </div>
                        </div>
                        <div class="list">
                            <div class="title">
                                绑定手机：
                            </div>
                            <div class="list_content">
                                18939450951
                            </div>
                        </div>
                        <div class="list">
                            <div class="title">
                                邮箱：
                            </div>
                            <div class="list_content">
                                18939450951
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane v-if="false" key="1" tab="店铺信息">
                        <div>店名</div>
                        <div>店铺地址</div>
                        <div>营业时间</div>
<!--                        <a-card title="店铺信息" style="width: 300px">-->
<!--                            <template #extra><a href="#">修改</a></template>-->
<!--                            <div>店名</div>-->
<!--                            <div>店铺地址</div>-->
<!--                        </a-card>-->
                    </a-tab-pane>

                </a-tabs>
            </div>
        </a-card>

    </div>
</template>

<script>
import {ref, defineComponent} from "vue";
export default defineComponent({
    name: "userInfo",
    setup() {
        return {
            activeKey: ref('2'),
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    //display: flex;
    //justify-content: space-between;
    width: 100%;
    height: 100%;

    .card {
        display: flex;
        justify-content: space-between;
        height: 100%;
        margin: 10px;
        //background: #fff;

        .avatar {
            text-align: center;
            .img {
                margin: 0 auto;
                width: 130px;
                height: 130px;
                background: #364d79;
                border-radius: 50%;

                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .info {
            width: 60%;
            height: 80%;
            //background: #f9fbfb;
            border: 1px solid #f0f0f0;

            .list {
                display: flex;
                font-weight: bold;
                height: 50px;
                line-height: 50px;
                .title {
                    width: 100px;
                }
            }
        }
    }
}

::v-deep .ant-card-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

::v-deep .ant-card-bordered {
    width: 100% !important;
}

::v-deep .ant-tabs-nav-scroll {
    text-align: left;
}
</style>